import React from 'react';
import {Button, Card, Flex, Table} from "antd";
import engineDataContrastColumns from "columns/EngineDataContrastColumns";
import useAsyncEffect from "../../../hooks/useAsyncEffect";
import {requestGet} from "../../../util/request";
import {EngineDataContrast} from "../../../type/EngineDataContrast";
import LogFactory from "../../../log/LogFactory";
import {PlusOutlined} from "@ant-design/icons";
import {Link, Outlet} from "react-router-dom";
import {useAppDispatch, useAppSelector} from "../../../redux/hook";
import {listData} from "../../../redux/reducer/engineDataReducer";

const log = LogFactory.getLog("DataMapComponent");
const DataMapComponent = () => {

    const state = useAppSelector(state => state.engineData) ;
    const dispatch = useAppDispatch() ;
    useAsyncEffect( async () =>{
        const res = await requestGet<EngineDataContrast[]>("/calista/engine-data-contrast/list") ;
        log.debug("获取发动机数据列表: " , res) ;
        if (res.success){
            // setData(res.data) ;
            dispatch(listData(res.data)) ;
        }

    });
    return (
        <Card title={"发动机数据列表"} style={{overflow: "hidden"}}>
            <Outlet/>
            <Flex>
                <Button type={"primary"}><Link to={"add"}><PlusOutlined />添加数据</Link></Button>
            </Flex>
            <Table
                dataSource={state.data}
                columns={engineDataContrastColumns}
            />
        </Card>
    );
};

export default DataMapComponent;